<template>
  <div class="update-logs-container">
    <el-tabs v-model="activeTab" class="tabs-container">
      <!-- 日志管理 -->
      <el-tab-pane label="日志管理" name="logs">
        <el-card class="logs-card">
          <template #header>
            <div class="card-header">
              <h2>更新日志管理</h2>
              <el-button type="primary" @click="showCreateLogDialog">创建新日志</el-button>
            </div>
          </template>

          <div class="logs-container">
            <div class="logs-list-section">
              <el-table
                :data="logs"
                style="width: 100%"
                :row-style="{ height: 'auto' }"
                :cell-style="{ 'vertical-align': 'top' }"
              >
                <el-table-column prop="id" label="ID" width="80"></el-table-column>
                <el-table-column prop="created_at" label="创建时间" width="120"></el-table-column>
                <el-table-column prop="update_content" label="内容">
                  <template #default="scope">
                    <div class="log-content">
                      {{ scope.row.update_content }}
                    </div>
                  </template>
                </el-table-column>
                <el-table-column label="操作" width="220">
                  <template #default="scope">
                    <el-button type="primary" size="small" @click="editLog(scope.row)"> 编辑 </el-button>
                    <el-button type="danger" size="small" @click="deleteLog(scope.row.id)"> 删除 </el-button>
                  </template>
                </el-table-column>
              </el-table>
            </div>
          </div>
        </el-card>
      </el-tab-pane>

      <!-- 文档管理 -->
      <el-tab-pane label="文档管理" name="docs">
        <el-card class="docs-card">
          <template #header>
            <div class="card-header">
              <h2>使用文档管理</h2>
              <el-button type="primary" @click="showCreateDocDialog">创建新文档</el-button>
            </div>
          </template>

          <div class="docs-container">
            <div class="docs-list-section">
              <el-table :data="docs" style="width: 100%" @row-click="viewDoc">
                <el-table-column prop="id" label="ID" width="80"></el-table-column>
                <el-table-column prop="title" label="标题" width="200"></el-table-column>
                <el-table-column prop="created_at" label="创建时间" width="140"></el-table-column>
                <el-table-column prop="content" label="内容预览" show-overflow-tooltip>
                  <template #default="scope">
                    <div class="content-preview">
                      {{ scope.row.content.substring(0, 50) }}
                      {{ scope.row.content.length > 50 ? "..." : "" }}
                    </div>
                  </template>
                </el-table-column>
                <el-table-column label="操作" width="180">
                  <template #default="scope">
                    <el-button type="primary" size="small" @click="editDoc(scope.row)"> 编辑 </el-button>
                    <el-button type="danger" size="small" @click="deleteDoc(scope.row.id)"> 删除 </el-button>
                  </template>
                </el-table-column>
              </el-table>
            </div>

            <div v-if="selectedDoc" class="doc-preview-section">
              <div class="doc-info">
                <div class="doc-meta">
                  <span>ID: {{ selectedDoc.id }}</span>
                  <span>标题: {{ selectedDoc.title }}</span>
                  <span>创建时间: {{ selectedDoc.created_at }}</span>
                </div>
              </div>
              <div class="doc-content-preview">
                <div v-html="selectedDocRendered" class="markdown-preview"></div>
              </div>
            </div>
          </div>
        </el-card>
      </el-tab-pane>

      <!-- 关于模板管理 -->
      <el-tab-pane label="关于模板" name="about">
        <el-card class="about-card">
          <template #header>
            <div class="card-header">
              <h2>关于模板管理</h2>
              <div class="header-actions">
                <el-button type="success" @click="loadAboutTemplate">刷新模板</el-button>
                <el-button type="warning" @click="restoreAboutTemplate">恢复备份</el-button>
                <el-button type="primary" @click="saveAboutTemplate">保存模板</el-button>
                <el-upload
                  ref="excelUploadRef"
                  :show-file-list="false"
                  :on-change="handleExcelUpload"
                  :auto-upload="false"
                  accept=".xls,.xlsx"
                >
                  <el-button type="info" :loading="uploadingExcel">
                    <el-icon><Upload /></el-icon>
                    上传打赏Excel
                  </el-button>
                </el-upload>
              </div>
            </div>
          </template>

          <div class="about-container">
            <div class="editor-preview-container">
              <div class="editor-section" :style="{ width: aboutEditorWidth + '%' }">
                <div class="editor-header">
                  <span>编辑器</span>
                  <el-tooltip content="about.md模板支持{update_time}和{table_rows}占位符">
                    <el-icon><InfoFilled /></el-icon>
                  </el-tooltip>
                </div>
                <el-input
                  v-model="aboutTemplate"
                  type="textarea"
                  placeholder="输入about.md模板内容..."
                  class="about-editor"
                  :disabled="loadingAboutTemplate"
                ></el-input>
              </div>
              <div class="resize-handle" @mousedown="startAboutDrag" :class="{ dragging: isDraggingAbout }"></div>
              <div class="preview-section" :style="{ width: 100 - aboutEditorWidth + '%' }">
                <div class="preview-header">
                  <span>预览</span>
                  <el-tag size="small" type="info">实时预览</el-tag>
                </div>
                <div class="about-preview-content">
                  <div v-html="aboutTemplateRendered" class="markdown-preview"></div>
                </div>
              </div>
            </div>
          </div>
        </el-card>
      </el-tab-pane>

      <el-tab-pane label="日历转换授权" name="sched">
        <div class="p-4">
          <el-form :inline="true">
            <el-form-item label="用户名组">
              <el-input v-model="form.usernames" placeholder="支持逗号、空格分隔多个用户名" style="width: 300px" />
            </el-form-item>
            <el-form-item label="金额">
              <el-input-number v-model="form.amount" :min="0" />
            </el-form-item>
            <el-button type="primary" @click="confirmUsers">确定</el-button>
          </el-form>

          <el-dialog title="确认添加" v-model="dialogVisible">
            <p>将为以下用户添加学年学期数据：</p>
            <el-tag v-for="u in usersToAdd" :key="u" style="margin: 4px">{{ u }}</el-tag>
            <template #footer>
              <el-button @click="dialogVisible = false">取消</el-button>
              <el-button type="primary" @click="submitUpdate">确认</el-button>
            </template>
          </el-dialog>

          <el-table :data="userList" style="margin-top: 20px" border>
            <el-table-column prop="user_id" label="ID" width="100" />
            <el-table-column prop="username" label="用户名" />
            <el-table-column prop="term_data" label="学年学期" :formatter="formatSemesters" />
          </el-table>
        </div>
      </el-tab-pane>
    </el-tabs>

    <!-- 创建/编辑日志对话框 -->
    <el-dialog v-model="logDialogVisible" :title="isEditingLog ? '编辑日志' : '创建新日志'">
      <el-form :model="logForm" label-width="100px">
        <el-form-item label="内容">
          <el-input v-model="logForm.update_content" type="textarea" :rows="15" placeholder="输入日志内容"></el-input>
        </el-form-item>
      </el-form>
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="logDialogVisible = false">取消</el-button>
          <el-button type="primary" @click="saveLog">保存</el-button>
        </div>
      </template>
    </el-dialog>

    <!-- 创建/编辑文档对话框 -->
    <el-dialog v-model="docDialogVisible" :title="isEditingDoc ? '编辑文档' : '创建新文档'" width="80%">
      <el-form :model="docForm" label-width="100px">
        <el-form-item label="标题">
          <el-input v-model="docForm.title" placeholder="输入文档标题"></el-input>
        </el-form-item>
        <el-form-item label="内容">
          <div class="editor-preview-container">
            <div class="editor-section" :style="{ width: editorWidth + '%' }">
              <el-input
                v-model="docForm.content"
                type="textarea"
                :rows="20"
                placeholder="输入Markdown格式的内容"
              ></el-input>
            </div>
            <div class="resize-handle" @mousedown="startDrag" :class="{ dragging: isDragging }"></div>
            <div class="preview-section" :style="{ width: 100 - editorWidth + '%' }">
              <div v-html="docFormRendered" class="markdown-preview"></div>
            </div>
          </div>
        </el-form-item>
      </el-form>
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="docDialogVisible = false">取消</el-button>
          <el-button type="primary" @click="saveDoc">保存</el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<script setup lang="ts">
  import { ref, computed, onMounted, onBeforeUnmount } from "vue";
  import { ElMessage, ElMessageBox } from "element-plus";
  import { InfoFilled, Upload } from "@element-plus/icons-vue";
  import { marked } from "marked";
  import createDOMPurify from "dompurify";
  import api from "../axios/api";

  const form = ref({
    usernames: "",
    amount: 0,
    current_year: 2025,
    current_term: 1
  });
  const dialogVisible = ref(false);
  const usersToAdd = ref<any>([]);
  const userList = ref([]);

  interface UpdateLog {
    id: number;
    update_content: string;
    created_at: string;
  }

  interface UseDoc {
    id: number;
    title: string;
    content: string;
    created_at: string;
  }

  const DOMPurify = createDOMPurify(window);

  const activeTab = ref("logs");
  const logs = ref<UpdateLog[]>([]);
  const docs = ref<UseDoc[]>([]);
  const selectedDoc = ref<UseDoc | null>(null);

  const logDialogVisible = ref(false);
  const docDialogVisible = ref(false);
  const isEditingLog = ref(false);
  const isEditingDoc = ref(false);

  const logForm = ref({
    id: 0,
    update_content: ""
  });

  const docForm = ref({
    id: 0,
    title: "",
    content: ""
  });

  // 预览窗格拖动调整大小
  const editorWidth = ref(60); // 编辑区域宽度百分比
  const isDragging = ref(false);

  // 关于模板相关
  const aboutTemplate = ref("");
  const aboutEditorWidth = ref(60);
  const isDraggingAbout = ref(false);
  const loadingAboutTemplate = ref(false);
  const uploadingExcel = ref(false);

  // 计算属性：渲染Markdown内容
  const selectedDocRendered = computed(() => {
    if (!selectedDoc.value) return "";
    const rawHTML = marked.parse(selectedDoc.value.content) as string;
    return DOMPurify.sanitize(rawHTML);
  });

  const docFormRendered = computed(() => {
    const rawHTML = marked.parse(docForm.value.content) as string;
    return DOMPurify.sanitize(rawHTML);
  });

  // 关于模板预览
  const aboutTemplateRendered = computed(() => {
    if (!aboutTemplate.value) return "";
    // 替换占位符用于预览
    const previewContent = aboutTemplate.value
      .replace("{update_time}", new Date().toLocaleString())
      .replace("{table_rows}", "| 2024-01-01 | 用户* | 10.00 | 谢谢支持 |\n| 2024-01-02 | 测试* | 5.00 | 加油 |");

    const rawHTML = marked.parse(previewContent) as string;
    return DOMPurify.sanitize(rawHTML);
  });

  // 开始拖动
  const startDrag = (e: MouseEvent) => {
    isDragging.value = true;
    document.addEventListener("mousemove", onDrag);
    document.addEventListener("mouseup", stopDrag);
    e.preventDefault();
  };

  // 拖动过程
  const onDrag = (e: MouseEvent) => {
    if (!isDragging.value) return;

    const container = document.querySelector(".editor-preview-container") as HTMLElement;
    if (!container) return;

    const rect = container.getBoundingClientRect();
    const newWidth = ((e.clientX - rect.left) / rect.width) * 100;

    // 限制宽度在20%到80%之间
    if (newWidth >= 20 && newWidth <= 80) {
      editorWidth.value = newWidth;
    }
  };

  // 停止拖动
  const stopDrag = () => {
    isDragging.value = false;
    document.removeEventListener("mousemove", onDrag);
    document.removeEventListener("mouseup", stopDrag);
  };

  // 获取所有日志
  const fetchLogs = async () => {
    try {
      const response = await api.getAllUpdateLogs();
      logs.value = response.data;
    } catch (error) {
      console.error("获取日志失败", error);
      ElMessage.error("获取日志列表失败");
    }
  };

  // 获取所有文档
  const fetchDocs = async () => {
    try {
      const response = await api.getAllUseDocs();
      docs.value = response.data;
    } catch (error) {
      console.error("获取文档失败", error);
      ElMessage.error("获取文档列表失败");
    }
  };

  // 查看文档详情
  const viewDoc = (doc: UseDoc) => {
    selectedDoc.value = doc;
  };

  // 显示创建日志对话框
  const showCreateLogDialog = () => {
    isEditingLog.value = false;
    logForm.value = {
      id: 0,
      update_content: ""
    };
    logDialogVisible.value = true;
  };

  // 显示创建文档对话框
  const showCreateDocDialog = async () => {
    isEditingDoc.value = false;

    // 获取当前最新的文档内容
    try {
      const latestDoc = docs.value.length > 0 ? docs.value[0] : null;
      docForm.value = {
        id: 0,
        title: latestDoc ? latestDoc.title : "",
        content: latestDoc ? latestDoc.content : ""
      };
    } catch (error) {
      console.error("获取最新文档失败", error);
      docForm.value = {
        id: 0,
        title: "",
        content: ""
      };
    }

    docDialogVisible.value = true;
  };

  // 编辑日志
  const editLog = (log: UpdateLog) => {
    isEditingLog.value = true;
    logForm.value = {
      id: log.id,
      update_content: log.update_content
    };
    logDialogVisible.value = true;
  };

  // 编辑文档
  const editDoc = (doc: UseDoc) => {
    isEditingDoc.value = true;
    docForm.value = {
      id: doc.id,
      title: doc.title,
      content: doc.content
    };
    docDialogVisible.value = true;
  };

  // 保存日志
  const saveLog = async () => {
    if (!logForm.value.update_content) {
      ElMessage.warning("请填写日志内容");
      return;
    }

    try {
      if (isEditingLog.value) {
        await api.updateUpdateLog(logForm.value.id, { update_content: logForm.value.update_content });
        ElMessage.success("更新成功");
      } else {
        await api.createUpdateLog({ update_content: logForm.value.update_content });
        ElMessage.success("创建成功");
      }
      logDialogVisible.value = false;
      fetchLogs();
    } catch (error) {
      console.error("保存失败", error);
      ElMessage.error("保存日志失败");
    }
  };

  // 保存文档
  const saveDoc = async () => {
    if (!docForm.value.title || !docForm.value.content) {
      ElMessage.warning("请填写标题和文档内容");
      return;
    }

    try {
      if (isEditingDoc.value) {
        await api.updateUseDocById(docForm.value.id, {
          title: docForm.value.title,
          content: docForm.value.content
        });
        ElMessage.success("更新成功");
      } else {
        await api.createUseDoc({
          title: docForm.value.title,
          content: docForm.value.content
        });
        ElMessage.success("创建成功");
      }
      docDialogVisible.value = false;
      fetchDocs();
    } catch (error) {
      console.error("保存失败", error);
      ElMessage.error("保存文档失败");
    }
  };

  // 删除日志
  const deleteLog = async (id: number) => {
    try {
      await ElMessageBox.confirm("此操作将永久删除该日志, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      });

      await api.deleteUpdateLog(id);
      ElMessage.success("删除成功");
      fetchLogs();
    } catch (error) {
      if (error !== "cancel") {
        console.error("删除失败", error);
        ElMessage.error("删除日志失败");
      }
    }
  };

  // 删除文档
  const deleteDoc = async (id: number) => {
    try {
      await ElMessageBox.confirm("此操作将永久删除该文档, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      });

      await api.deleteUseDoc(id);
      ElMessage.success("删除成功");
      fetchDocs();
      if (selectedDoc.value?.id === id) {
        selectedDoc.value = null;
      }
    } catch (error) {
      if (error !== "cancel") {
        console.error("删除失败", error);
        ElMessage.error("删除文档失败");
      }
    }
  };

  // 关于模板相关方法
  const startAboutDrag = (e: MouseEvent) => {
    isDraggingAbout.value = true;
    document.addEventListener("mousemove", onAboutDrag);
    document.addEventListener("mouseup", stopAboutDrag);
    e.preventDefault();
  };

  const onAboutDrag = (e: MouseEvent) => {
    if (!isDraggingAbout.value) return;

    const container = document.querySelector(".about-container .editor-preview-container") as HTMLElement;
    if (!container) return;

    const rect = container.getBoundingClientRect();
    const newWidth = ((e.clientX - rect.left) / rect.width) * 100;

    if (newWidth >= 20 && newWidth <= 80) {
      aboutEditorWidth.value = newWidth;
    }
  };

  const stopAboutDrag = () => {
    isDraggingAbout.value = false;
    document.removeEventListener("mousemove", onAboutDrag);
    document.removeEventListener("mouseup", stopAboutDrag);
  };

  const loadAboutTemplate = async () => {
    loadingAboutTemplate.value = true;
    try {
      const response = await api.getAboutTemplate();
      aboutTemplate.value = response.data.content;
      ElMessage.success("模板加载成功");
    } catch (error) {
      console.error("加载模板失败", error);
      ElMessage.error("加载模板失败");
    } finally {
      loadingAboutTemplate.value = false;
    }
  };

  const saveAboutTemplate = async () => {
    if (!aboutTemplate.value) {
      ElMessage.warning("请输入模板内容");
      return;
    }

    try {
      await api.updateAboutTemplate(aboutTemplate.value);
      ElMessage.success("模板保存成功");
    } catch (error) {
      console.error("保存模板失败", error);
      ElMessage.error("保存模板失败");
    }
  };

  const restoreAboutTemplate = async () => {
    try {
      await ElMessageBox.confirm("此操作将恢复到备份版本，当前修改将丢失，是否继续？", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      });

      await api.restoreAboutTemplate();
      ElMessage.success("模板恢复成功");
      await loadAboutTemplate(); // 重新加载模板
    } catch (error) {
      if (error !== "cancel") {
        console.error("恢复模板失败", error);
        ElMessage.error("恢复模板失败");
      }
    }
  };

  const handleExcelUpload = async (uploadFile: any) => {
    // 获取原始文件
    const file = uploadFile.raw;

    if (!file) {
      ElMessage.error("文件获取失败");
      return;
    }

    // 验证文件类型
    if (!file.name.endsWith(".xls") && !file.name.endsWith(".xlsx")) {
      ElMessage.error("只支持Excel文件(.xls, .xlsx)");
      return;
    }

    // 验证文件大小 (限制10MB)
    if (file.size > 10 * 1024 * 1024) {
      ElMessage.error("文件大小不能超过10MB");
      return;
    }

    uploadingExcel.value = true;

    try {
      const response = await api.uploadDonationExcel(file);
      const result = response.data;

      ElMessage.success(`上传成功! 记录数: ${result.record_count}`);

      // 询问是否重新加载模板
      try {
        await ElMessageBox.confirm("Excel文件上传成功，是否重新加载模板查看更新？", "提示", {
          confirmButtonText: "重新加载",
          cancelButtonText: "稍后手动刷新",
          type: "info"
        });
        await loadAboutTemplate();
      } catch (confirmError) {
        // 用户选择了不重新加载，这是正常的
      }
    } catch (error: any) {
      console.error("上传Excel文件失败", error);
      const errorMessage = error.response?.data?.detail || "上传失败";
      ElMessage.error(errorMessage);
    } finally {
      uploadingExcel.value = false;
    }
  };

  const loadsched = async () => {
    try {
      const response = await api.getUserSemesters();
      userList.value = response.data;
    } catch (error) {
      console.error("加载用户学期数据失败", error);
      ElMessage.error("加载用户学期数据失败");
    }
  };

  const confirmUsers = () => {
    usersToAdd.value = form.value.usernames
      .replace(/[,，\s]+/g, " ")
      .split(" ")
      .filter(Boolean);
    if (!usersToAdd.value.length) {
      ElMessage.warning("请输入用户名");
      return;
    }
    dialogVisible.value = true;
  };

  const submitUpdate = async () => {
    try {
      const res = await api.updateUserSemesters(form.value);
      ElMessage.success(res.data.msg);
      dialogVisible.value = false;
      const updated = await api.getUserSemesters();
      userList.value = updated.data;
    } catch (error) {
      console.error("更新学年学期失败", error);
      ElMessage.error("更新学年学期失败");
    }
  };

  const formatSemesters = (row: any) => (row.term_data ? row.term_data.map((s: any) => s.join(",")).join("；") : "-");

  onMounted(() => {
    fetchLogs();
    fetchDocs();
    loadAboutTemplate();
    loadsched();
  });

  // 清理事件监听器
  onBeforeUnmount(() => {
    if (isDragging.value) {
      document.removeEventListener("mousemove", onDrag);
      document.removeEventListener("mouseup", stopDrag);
    }
    if (isDraggingAbout.value) {
      document.removeEventListener("mousemove", onAboutDrag);
      document.removeEventListener("mouseup", stopAboutDrag);
    }
  });
</script>

<style scoped>
  .update-logs-container {
    padding: 20px;
  }

  .tabs-container {
    margin-bottom: 20px;
  }

  .logs-card,
  .docs-card,
  .about-card {
    margin-bottom: 20px;
  }

  .card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }

  .header-actions {
    display: flex;
    gap: 10px;
    align-items: center;
    flex-wrap: wrap;
  }

  .logs-container {
    margin-top: 20px;
  }

  .logs-list-section {
    width: 100%;
  }

  .docs-container {
    display: flex;
    gap: 20px;
    margin-top: 20px;
  }

  .docs-list-section {
    flex: 1;
    min-width: 0;
  }

  .doc-preview-section {
    flex: 1;
    min-width: 0;
    border-left: 1px solid #ebeef5;
    padding-left: 20px;
  }

  .doc-meta {
    display: flex;
    gap: 20px;
    color: #666;
    font-size: 0.9rem;
    margin-bottom: 15px;
  }

  .content-preview {
    color: #666;
    font-size: 0.9rem;
  }

  .log-content {
    white-space: pre-wrap;
    word-wrap: break-word;
    line-height: 1.4;
    padding: 8px 0;
    max-height: 200px;
    overflow-y: auto;
  }

  .doc-content-preview {
    border: 1px solid #dcdfe6;
    border-radius: 12px;
    padding: 20px;
    background-color: #f8f9fa;
    max-width: 255px;
    height: 476px;
    margin-left: auto;
    margin-right: auto;
    position: relative;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    display: flex;
    flex-direction: column;
  }

  .doc-content-preview::before {
    content: "";
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 60px;
    height: 6px;
    background-color: #dcdfe6;
    border-radius: 3px;
    margin-top: 8px;
  }

  .markdown-preview {
    line-height: 1.6;
    padding: 0 15px;
    max-width: 100%;
    overflow-wrap: break-word;
    word-wrap: break-word;
    font-size: 14px;
    overflow-y: auto;
    flex: 1;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
    scrollbar-color: #dcdfe6 #f8f9fa;
  }

  .markdown-preview::-webkit-scrollbar {
    width: 4px;
  }

  .markdown-preview::-webkit-scrollbar-track {
    background: #f8f9fa;
  }

  .markdown-preview::-webkit-scrollbar-thumb {
    background-color: #dcdfe6;
    border-radius: 2px;
  }

  .markdown-preview h1 {
    font-size: 20px;
    margin-top: 1em;
    margin-bottom: 0.5em;
    word-wrap: break-word;
  }

  .markdown-preview h2 {
    font-size: 18px;
    margin-top: 1em;
    margin-bottom: 0.5em;
    word-wrap: break-word;
  }

  .markdown-preview h3 {
    font-size: 16px;
    margin-top: 1em;
    margin-bottom: 0.5em;
    word-wrap: break-word;
  }

  .markdown-preview p {
    margin: 0.5em 0;
    word-wrap: break-word;
    font-size: 14px;
  }

  .markdown-preview ul,
  .markdown-preview ol {
    padding-left: 20px;
    margin: 0.5em 0;
  }

  .markdown-preview li {
    margin: 0.3em 0;
    font-size: 14px;
  }

  .markdown-preview code {
    background-color: #f0f0f0;
    padding: 2px 4px;
    border-radius: 3px;
    word-break: break-all;
    font-size: 13px;
  }

  .markdown-preview pre {
    background-color: #f0f0f0;
    padding: 12px;
    border-radius: 3px;
    overflow-x: auto;
    margin: 0.5em 0;
    font-size: 13px;
  }

  .markdown-preview img {
    max-width: 100%;
    height: auto;
    border-radius: 8px;
  }

  .markdown-preview table {
    width: 100%;
    border-collapse: collapse;
    margin: 0.5em 0;
    overflow-x: auto;
    display: block;
    font-size: 13px;
  }

  .markdown-preview th,
  .markdown-preview td {
    border: 1px solid #dcdfe6;
    padding: 6px;
    text-align: left;
  }

  .markdown-preview blockquote {
    margin: 0.5em 0;
    padding: 0.5em 1em;
    border-left: 4px solid #dcdfe6;
    background-color: #f8f9fa;
    font-size: 14px;
  }

  .markdown-preview hr {
    margin: 1em 0;
    border: none;
    border-top: 1px solid #dcdfe6;
  }

  .editor-preview-container {
    display: flex;
    height: 600px;
    position: relative;
  }

  .editor-section {
    display: flex;
    flex-direction: column;
    min-width: 200px;
    transition: width 0.1s ease;
  }

  .editor-section :deep(.el-textarea__inner) {
    height: 100%;
    font-family: monospace;
    font-size: 14px;
    line-height: 1.6;
  }

  .resize-handle {
    width: 8px;
    background-color: #f0f0f0;
    border: 1px solid #dcdfe6;
    cursor: col-resize;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
  }

  .resize-handle:hover {
    background-color: #e6e6e6;
  }

  .resize-handle.dragging {
    background-color: #409eff;
  }

  .resize-handle::before {
    content: "";
    width: 2px;
    height: 30px;
    background-color: #bbb;
    border-radius: 1px;
  }

  .resize-handle:hover::before {
    background-color: #888;
  }

  .resize-handle.dragging::before {
    background-color: #fff;
  }

  .preview-section {
    border: 1px solid #dcdfe6;
    border-radius: 4px;
    padding: 15px;
    overflow-y: auto;
    background-color: #f8f9fa;
    min-width: 200px;
    transition: width 0.1s ease;
  }

  .preview-section .markdown-preview {
    height: 100%;
    overflow-y: auto;
  }

  /* 关于模板相关样式 */
  .about-container {
    margin-top: 20px;
  }

  .about-editor :deep(.el-textarea__inner) {
    height: 600px;
    font-family: monospace;
    font-size: 14px;
    line-height: 1.6;
    resize: none;
  }

  .editor-header,
  .preview-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 15px;
    background-color: #f5f7fa;
    border-bottom: 1px solid #dcdfe6;
    font-weight: 500;
    color: #606266;
    border-radius: 4px 4px 0 0;
  }

  .about-preview-content {
    border: 1px solid #dcdfe6;
    border-radius: 0 0 4px 4px;
    padding: 15px;
    background-color: #fff;
    height: 600px;
    overflow-y: auto;
  }

  /* 移动端适配 */
  @media screen and (max-width: 768px) {
    .docs-container {
      flex-direction: column;
    }

    .doc-preview-section {
      border-left: none;
      border-top: 1px solid #ebeef5;
      padding-left: 0;
      padding-top: 20px;
    }

    .editor-preview-container {
      flex-direction: column;
      height: auto;
    }

    .editor-section {
      min-width: auto;
      width: 100% !important;
    }

    .resize-handle {
      display: none;
    }

    .preview-section {
      width: 100% !important;
      max-width: none;
      margin-top: 20px;
    }

    .about-editor :deep(.el-textarea__inner) {
      height: 400px;
    }

    .about-preview-content {
      height: 400px;
    }

    .header-actions {
      flex-direction: column;
      gap: 8px;
    }

    .header-actions .el-button {
      width: 100%;
    }
  }
</style>
